<template>
  <div>
    <div class="banner">
      <el-card style="margin-top: 58px">
        <el-button type="info" @click="$router.push('/myblog')"><i class="el-icon-arrow-left"></i>返回</el-button>

        <el-button type="primary" style="float: right" @click="update"> 更新文章
        </el-button>


      </el-card>

      <el-form :model="form" label-width="120px" :rules="rules" ref="form">
        <el-form-item label="标题" style="margin-left: 300px;margin-top: 15px" prop="title">
          <el-input v-model="form.title" type="title" style="width: 50%" placeholder="请输入标题"></el-input>

          <el-select v-model="form.category" placeholder="请选择文章类别"
                     style=";margin-left: 100px;z-index: 100;position: relative">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="封面" style=";margin-left: 1250px;z-index: 100;position:  relative;top: -50px;">
          <el-upload
            ref="upload"
            action="http://127.0.0.1:8083/files/upload"
            :on-success="filesUploadSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>

          </el-upload>
        </el-form-item>
        <div id="div1" v-model="form.content" class="text" style="opacity: 0.9999;font-size: 15px">

        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import "../assets/index.css";
  import E from 'wangeditor'
  import request from '../utils/request'
  import emotion from '../utils/emotion.js'
  import img from '../utils/img.js'
  import axios from '../utils/axios.min.js'

  let editor
  export default {
    name: 'UpdateBlog',
    data() {
      return {
        forms: {},
        options: [{
          value: '面试',
          label: '面试'
        }, {
          value: '数据库',
          label: '数据库'
        }, {
          value: '安全',
          label: '安全'
        }, {
          value: '学习笔记',
          label: '学习笔记'
        }, {
          value: '大数据',
          label: '大数据'
        },
          {
            value: '前端',
            label: '前端'
          },
          {
            value: '架构',
            label: '架构'
          },
          {
            value: 'java',
            label: 'java'
          },
          {
            value: '心得',
            label: '心得'
          },
          {
            value: '其他',
            label: '其他'
          }],
        value: '',

        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ]

        },
        form: { title: '', content: '', category: '' }
      }

    },
    created() {
      let str = sessionStorage.getItem('user')
      this.forms = JSON.parse(str)

      let id = this.$route.query

      this.form = this.$route.query

      request.get('/news/query/' + id.id).then(res => {
        this.form = res.data
        editor.txt.html(this.form.content)

      })

    },
    mounted() {

    /*  let url = `https://api.weibo.com/2/emotions.json?source=1362404091`
      axios.get(url).then(res => {
        console.log(res)
      })*/

      let httpUrl = `https://free-api.heweather.net/s6/weather/now?location=芜湖&key=bd5c2bbed6ac44b9a504781e436299a8`;
      let res = axios.get(httpUrl);
      console.log(res)


      //关联div
      this.$nextTick(() => {
        editor = new E('#div1')

        editor.config.uploadImgServer = 'http://localhost:8083/files/editor/load'
        editor.config.uploadFileName = 'file'
        editor.config.emotions = [
          {
            title: 'gif表情', // tab 的标题
            type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者图片形式

            content: []
          },
          {
            title: '表情', // tab 的标题
            type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者图片形式

            content: []
          }

        ]
        let emotions = emotion.c
        let imgs = img.m
        emotions.forEach(item => {

          editor.config.emotions[0].content.push({ alt: item.value, src: item.icon })
        })
        imgs.forEach(item => {
          editor.config.emotions[1].content.push({ alt: item.phrase, src: item.url })
        })
        editor.create()

      })
    },
    methods: {
      //文件上传  更新文件
      filesUploadSuccess(res) {
        console.log(res.data)
        this.form.img = res.data
      },
      update() {
        this.form.content = editor.txt.html()
        request.put('/news/updateNew', this.form).then(res => {
          if (res.code === 20000) {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.$router.push('/myblog')
          }
        })
      }

    }

  }
</script>

<style scoped>
  .text {
    border: 1px solid #ccc;
    min-height: 60px;
  }

  .eleImg {
    display: none;
  }
</style>
